<template>
  <div class="picker-test-page">
    <h2>选择器功能测试</h2>
    
    <div class="test-section">
      <h3>关系选择器测试</h3>
      <van-field
        v-model="testForm.relationship"
        name="relationship"
        label="关系"
        placeholder="请选择与本人关系"
        readonly
        is-link
        @click="showRelationshipPicker = true"
      />
      <p>当前选择: {{ testForm.relationship || '未选择' }}</p>
    </div>

    <div class="test-section">
      <h3>证件类型选择器测试</h3>
      <van-field
        v-model="testForm.idCardType"
        name="idCardType"
        label="证件类型"
        placeholder="请选择证件类型"
        readonly
        is-link
        @click="showIdCardTypePicker = true"
      />
      <p>当前选择: {{ testForm.idCardType || '未选择' }}</p>
    </div>

    <div class="test-section">
      <h3>调试信息</h3>
      <pre>{{ JSON.stringify(testForm, null, 2) }}</pre>
    </div>

    <!-- 关系选择器 -->
    <van-popup v-model:show="showRelationshipPicker" position="bottom">
      <van-picker
        :columns="relationshipOptions"
        @confirm="onRelationshipConfirm"
        @cancel="showRelationshipPicker = false"
      />
    </van-popup>

    <!-- 证件类型选择器 -->
    <van-popup v-model:show="showIdCardTypePicker" position="bottom">
      <van-picker
        :columns="idCardTypeOptions"
        @confirm="onIdCardTypeConfirm"
        @cancel="showIdCardTypePicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Toast } from 'vant'

const showRelationshipPicker = ref(false)
const showIdCardTypePicker = ref(false)

const testForm = reactive({
  relationship: '',
  idCardType: ''
})

// 选项数据
const relationshipOptions = [
  '本人',
  '父母', 
  '配偶',
  '子女',
  '其他'
]

const idCardTypeOptions = [
  '身份证',
  '护照',
  '军官证',
  '其他'
]

// 选择器事件处理
const onRelationshipConfirm = (value: any) => {
  console.log('关系选择器确认事件:', value)
  console.log('value类型:', typeof value)
  console.log('value内容:', JSON.stringify(value))
  
  if (typeof value === 'string') {
    testForm.relationship = value
  } else if (value && value.selectedValues) {
    testForm.relationship = value.selectedValues[0]
  } else if (value && value.selectedOptions) {
    testForm.relationship = value.selectedOptions[0].value
  } else if (Array.isArray(value)) {
    testForm.relationship = value[0]
  }
  
  showRelationshipPicker.value = false
  console.log('设置关系为:', testForm.relationship)
  Toast(`已选择关系: ${testForm.relationship}`)
}

const onIdCardTypeConfirm = (value: any) => {
  console.log('证件类型选择器确认事件:', value)
  console.log('value类型:', typeof value)
  console.log('value内容:', JSON.stringify(value))
  
  if (typeof value === 'string') {
    testForm.idCardType = value
  } else if (value && value.selectedValues) {
    testForm.idCardType = value.selectedValues[0]
  } else if (value && value.selectedOptions) {
    testForm.idCardType = value.selectedOptions[0].value
  } else if (Array.isArray(value)) {
    testForm.idCardType = value[0]
  }
  
  showIdCardTypePicker.value = false
  console.log('设置证件类型为:', testForm.idCardType)
  Toast(`已选择证件类型: ${testForm.idCardType}`)
}
</script>

<style scoped>
.picker-test-page {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #1989fa;
}

.test-section p {
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}

pre {
  background: #f7f8fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}
</style>
